<template>
	<view>
		<!-- <u-sticky :offsetTop="0">
			<view class="bg-white u-p-b-20">
				<view class="u-m-l-40 u-m-r-40 sub-nav">
					<u-subsection :list="sublist" :current="current" @change="sbuChange" inactiveColor="#999"
						mode="subsection" activeColor="#FF5B00" bgColor="#fff"></u-subsection>
				</view>
			</view>
		</u-sticky> -->
		<u-checkbox-group activeColor="rgba(29, 32, 136, 1)" v-model="idsArr" placement="cloum">
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" v-if="cartList.length==0">
			</u-empty>
			<block v-for="(item,k) in cartList" :key="k">
				<u-swipe-action>
					<u-swipe-action-item :options="options" :name="k" @click="handleDeleteShoppingCarProduct(item.id)"
						@touchmove="move(k)" :ref="'swipeAction'+k" class="text-red">
						<view class="bg-white card flex">
							<view class="flex align-center">
								<u-checkbox :name="item.id" activeColor="#FF5B00" shape="circle"
									@change="(value)=>checkCartProductInfo(item.id,value,item)"></u-checkbox>
								<u-image :showLoading="true" mode="aspectFill" radius="8rpx" :src="item.image"
									width="174rpx" height="174rpx">
									<view slot="loading">
										<u-loading-icon></u-loading-icon>
									</view>
								</u-image>
							</view>
							<view class="u-m-l-20" style="width: 100%;">
								<view class="text-black">{{item.productName.substring(0,14)}}...</view>
								<view class="flex align-center u-m-t-10 ">
									<view class="tag">{{item.unit}}</view>
								</view>
								<view class="u-m-t-50 flex align-center justify-between" style="width: 100%;">
									<view>
										<text class="text-bold text-black u-font-xs">￥</text>
										<text
											class="u-font-lgm text-black text-bold">{{parseFloat(item.salePrice).toFixed(2)}}</text>
										<!-- <text class="u-font-xs text-black text-bold">.99</text> -->
									</view>
									<u-number-box v-model="item.count" buttonSize="25"
										@change="(value)=>handleUpdateProductToShoppingCar(item,value)"></u-number-box>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</block>
		</u-checkbox-group>
		<view style="height: 200rpx;"></view>

		<view class="footer">
			<view>
				<u-checkbox-group>
					<view class="flex align-center">
						<!-- <u-checkbox v-model="value" @change="all" activeColor="#FF5B00" shape="circle"
							label=" "></u-checkbox>
						<text class="text-black u-font-24">全选</text>
						<text class="u-m-l-10 u-m-r-10" style="color: #999999;">|</text> -->
						<view>
							<view>
								<text>总计:</text>
								<text class="u-font-xs" style="color: #FD002B;">￥</text>
								<text class="text-bold"
									style="color: #FD002B;font-size: 32rpx;">{{parseFloat(sumAmount).toFixed(2)}}</text>
							</view>
							<view>
								<text class="u-font-xs"
									style="color: #FF4B6A;">已优惠￥{{parseFloat(sumSaleAmount).toFixed(2)}}</text>
								<!-- <text class="u-m-l-10 u-font-xs" style="color: #999999;">优惠明细</text> -->
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<view class="btn" @click="handleToOrder()">立即下单</view>
		</view>
	</view>
</template>

<script>
	import {
		getShoppingCarList,
		updateProductToShoppingCar,
		deleteShoppingCarProduct
	} from '@/common/api/api.js'
	// import {numberAdd,numberSub,numberMul,numberDiv} from '@/util/utils.js'
	export default {
		data() {
			return {
				sublist: ['洗护商品', '商城商品'],
				current: 0,
				options: [{
					text: '删除'
				}],
				idsArr: [],
				value: '',
				cartList: [],
				sumAmount: 0.00,
				sumSaleAmount: 0.00,
				saleInfoList: [],
				type: 1,
				moveIndex: -1, //用于记录滑动下标
				changeCarts: [],
				companyId:'',
			}
		},
		onLoad(options) {
			this.companyId=options.companyId;
			this.handleGetShoppingCarList();
		},
		methods: {
			move(index) {
				if (this.moveIndex == index) return
				this.moveIndex = index
			},

			closeSwipeAction() {
				let test = 'swipeAction' + this.moveIndex;
				console.log(test);
				if (this.moveIndex != -1) {
					this.$refs[test][0].closeHandler()
				}
			},

			sbuChange(index) {
				this.current = index;
				this.type = index;
				this.handleGetShoppingCarList();
			},
			//全选
			all(flag) {
				if (flag) {
					this.cartList.map(e => {
						this.idsArr.push(e.id);
						this.changeCarts.push(e);
					})
				} else {
					this.idsArr = [];
					this.changeCarts = [];
				}
				this.jisuan();
			},
			// 单选
			checkCartProductInfo(id, e, item) {
				const that = this;
				if (e) {
					that.idsArr.push(id);
					that.changeCarts.push(item);

				} else {
					that.idsArr = that.idsArr.filter(item => item != id);
					that.changeCarts = that.changeCarts.filter(item => item.id != id);
				}
				// this.idsArr.push(id);
				console.log("ids", that.idsArr);
				that.jisuan();
			},
			//  获取洗衣篮信息列表
			handleGetShoppingCarList() {
				getShoppingCarList({
					userInfoId: this.$store.state.$token,
					type: this.type,
					status: '0',
					companyId:this.companyId
				}).then(res => {
					this.cartList = res.data.list.map(item => {

						// this.sumAmount = this.$utils.numberAdd(this.sumAmount, item.amount);
						if (item.salePrice < item.price) {
							var sumSaleAmount = this.$utils.numberMul(this.$utils.numberSub(item.price,
								item.salePrice), item.count);
							// var saleInfo = {
							// 	productName: item.productName,
							// 	price: item.price,
							// 	salePrice: item.saleInfo,
							// 	sumSaleAmount: sumSaleAmount
							// };
							// this.sumSaleAmount = this.$utils.numberAdd(this.sumSaleAmount, sumSaleAmount);
						}
						return item;
					});
				})
			},
			jisuan() {
				this.sumAmount = 0.00;
				this.sumSaleAmount = 0.00;
				this.changeCarts.map(item => {
					this.sumAmount = this.$utils.numberAdd(this.sumAmount, item.amount);
					var sumSaleAmount = this.$utils.numberMul(this.$utils.numberSub(item.price,
						item.salePrice), item.count);
					this.sumSaleAmount = this.$utils.numberAdd(this.sumSaleAmount, sumSaleAmount);
				})
			},
			// 修改购物商品信息
			handleUpdateProductToShoppingCar(item, e) {
				console.log("item.count", item, e);
				var params = {
					id: item.id,
					count: e.value,
					salePrice: item.salePrice
				}
				updateProductToShoppingCar(params).then(res => {
					this.handleGetShoppingCarList();
				})
				this.changeCarts = this.changeCarts.map(cart => {
					if (cart.id == params.id) {
						cart.count = params.count
						cart.amount = this.$utils.numberMul(cart.salePrice, cart.count);
					}
					return cart;
				})
				console.log("123xx", this.changeCarts)
				this.jisuan();
			},
			// 删除洗衣篮商品信息
			handleDeleteShoppingCarProduct(id) {
				var _this = this;
				uni.showModal({
					title: '删除提示',
					content: '您确定删除当前商品',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: 'gray',
					success: (res) => {
						if (res.confirm) {
							console.log('comfirm') //点击确定之后执行的代码
							// 删除当前商品
							deleteShoppingCarProduct({
								id: id
							}).then(res => {
								if (res.code == 200) {
									uni.$u.toast('删除成功');
									_this.handleGetShoppingCarList();
									_this.idsArr = [];
									_this.changeCarts = [];
									_this.jisuan();
								}

							})
							_this.closeSwipeAction();

						} else {
							console.log('cancel') //点击取消之后执行的代码
							_this.closeSwipeAction();
						}
					}
				})



			},
			// 下单
			handleToOrder() {
				if (this.idsArr.length > 0) {
					this.$u.route('/pages/index/order/order?idsArr=' + this.idsArr)
				} else {
					uni.$u.toast("请先选择商品");
				}
			},

		},
		onPullDownRefresh() {
			this.handleGetShoppingCarList();
			// this.handleGetDictList();
			uni.hideLoading();
		}
	}
</script>

<style>
	>>>.u-number-box__plus {
		background-color: #FF5B00 !important;
	}

	>>>.uicon-plus {
		color: #ffffff !important;
	}
</style>
<style lang="scss">
	.card {
		padding: 22rpx;
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 20rpx;

		.tag {
			min-width: 50rpx;
			padding: 4rpx 10rpx;
			text-align: center;
			background: #F3F4F6;
			border-radius: 4rpx;
			font-size: 24rpx;
			color: #9E9E9E;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0rpx;
		padding-top: 20rpx;
		background-color: #fff;
		padding-left: 32rpx;
		padding-right: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999999;

		.btn {
			width: 190rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #FF5B00;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}
</style>